import Calendar from "react-calendar"
import styles from './style.module.css'
import ReactDom from 'react-dom'
import 'react-calendar/dist/Calendar.css';
import clsx from "clsx";
import { format } from 'date-fns'

function CalendarItem({ visible, setVisible, onChange }) {
    if (!visible) return

    return ReactDom.createPortal(
        <>
            <div
                className="fixed top-0 left-0 w-[100vw] h-[100vh] z-1"
                style={{
                    backgroundColor: "rgba(0,0,0,.7)"
                }}
                onClick={() => setVisible(false)}
            ></div>
            <div className={`fixed 
                bottom-0 
                bg-white 
                z-1 
                w-full 
                flex 
                flex-col 
                max-h-[45%] 
                overflow-y-scroll
                rounded-t-[20px]
                ${styles.bottom}
                ${styles.top}`}
            >
                <Calendar
                    selectRange={true}
                    className=
                    {clsx('w-[100%]',
                        styles.calendar,
                        styles.reactCalendar)}
                    onChange={(val: any) => onChange(val.map(item => format(item, 'yyyy-MM-dd')))}
                />
            </div>
        </>, document.body
    )
}
export default CalendarItem